<template>
  <div>
    <h2>基本信息</h2>
    <a-descriptions bordered>
      <a-descriptions-item label="接口名称" :span="2">{{ apiDetail.apiName }}</a-descriptions-item>
      <a-descriptions-item label="请求协议" :span="1">{{ apiDetail.apiAgreement }}</a-descriptions-item>
      <a-descriptions-item label="接口分类" :span="2">{{ apiDetail.apiDirectoryCode }}</a-descriptions-item>
      <a-descriptions-item label="请求方式" :span="1">{{ apiDetail.apiRequestMethod }}</a-descriptions-item>
      <a-descriptions-item label="IP端口" :span="2">{{ apiDetail.apiIpPort }}</a-descriptions-item>
      <a-descriptions-item label="支持格式" :span="1">JSON</a-descriptions-item>
      <a-descriptions-item label="Path" :span="2">{{ apiDetail.apiPath }}</a-descriptions-item>
      <a-descriptions-item label="超时时间" :span="1">{{ apiDetail.apiRequestTimeout }}</a-descriptions-item>
      <a-descriptions-item label="接口描述" :span="3">{{ apiDetail.apiDescribe }}</a-descriptions-item>
    </a-descriptions>
  </div>

  <div class="config">
    <h2>请求参数</h2>
    <a-table :columns="columns1" row-key="apcCode" :data-source="paramList" bordered :pagination="false"> </a-table>
  </div>

  <div class="config">
    <h2>请求Body</h2>
    <a-table :columns="columns" row-key="apcCode" :data-source="bodyList" bordered :pagination="false"> </a-table>
  </div>

  <div class="config">
    <h2>接口返回参数</h2>
    <a-table :columns="columns" row-key="apcCode" :data-source="resultList" bordered :pagination="false"> </a-table>
  </div>
</template>
<script lang="ts" setup>
  import { getInterfaceDetailsHooks } from '@/hooks/InterfaceManagementHooks/getInterfaceDetailsHooks';
  const { apiDetail, paramList, bodyList, resultList } = getInterfaceDetailsHooks();
  const columns = [
    {
      title: '参数名称',
      dataIndex: 'apcName',
    },
    {
      title: '数据类型',
      dataIndex: 'apcDataType',
    },
    {
      title: '说明',
      dataIndex: 'apcDescribe',
    },
  ];

  const columns1 = [
    {
      title: '参数名称',
      dataIndex: 'apcName',
      align: 'center',
      width: '15%',
    },
    {
      title: '数据类型',
      dataIndex: 'apcDataType',
      width: '15%',
      align: 'center',
    },
    {
      title: '参数位置',
      dataIndex: 'apcPosition',
      align: 'center',
      width: '15%',
    },
    {
      title: '是否必填',
      dataIndex: 'apcDataNull',
      align: 'center',
      width: '15%',
    },
    {
      title: '默认请求参数',
      dataIndex: 'apcValue',
      align: 'center',
      width: '20%',
    },
    {
      title: '说明',
      dataIndex: 'apcDescribe',
      align: 'center',
    },
  ];
</script>
<style lang="less" scoped>
  .config {
    margin-top: 15px;
  }
</style>
